<!DOCTYPE html>
<html>

	<head>
		<title>{$pageData.title}</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			img {
				border: 0;
			}
			
			html,
			body {
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			
			ul li {
				list-style-type: none;
			}
			
			body {
				font-family: "微软雅黑";
				font-size: 14px;
				color: #a7a7a7;
				height: 100%;
			}
			
			.login-left {
				width: 60%;
				height: 100%;
				float: left;
				background-color: #2b2c35;
				position: relative;
			}
			
			.login-right {
				width: 40%;
				height: 100%;
				float: right;
				position: relative;
			}
			
			.login-left-ban {
				width: 700px;
				height: 500px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-top: -250px;
				margin-left: -350px;
			}
			
			.login-right-cen {
				width: 500px;
				height: 500px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-top: -250px;
				margin-left: -250px;
			}
			
			.login-logo,
			.login-from {
				padding: 0 50px;
			}
			
			.login-from ul li {
				position: relative;
				height: 38px;
				line-height: 38px;
				width: 260px;
				padding: 2px 18px 2px 32px;
				margin-bottom: 16px;
				border-bottom: 1px solid #e7e7e7;
			}
			
			.login-from .login-from-int {
				height: 24px;
				line-height: 24px;
				padding: 7px 0;
				width: 260px;
				color: #606060;
				border: 0 none;
				outline: none;
			}
			
			.login-short-but {
				width: 100px;
				position: absolute;
				right: 10px;
				height: 25px;
				color: #ffffff;
				background-color: #ffa300;
				border: none;
				top: 10px;
			}
			
			.login-from .login-but,
			.login-from .login-but01 {
				outline: none;
				width: 310px;
				height: 46px;
				line-height: 46px;
				margin-top: 20px;
				background: #ffa300;
				border-radius: 2px;
				color: #fff;
				border: 0 none;
				letter-spacing: 4px;
				font-size: 16px;
			}
			
			.login-from ul li label {
				position: absolute;
				left: 2px;
				top: 10px;
				width: 24px;
				height: 24px;
			}
			
			.login-from ul li label.loginListUser {
				background: url(__STATIC__/manage/images/yhicon.png) no-repeat;
				background-size: 24px 24px;
			}
			
			.login-from ul li label.loginListPwd {
				background: url(__STATIC__/manage/images/mmicon.png) no-repeat;
				background-size: 24px 24px;
			}
			
			.login-from ul li label.loginListYzm {
				background: url(__STATIC__/manage/images/yzmicon.png) no-repeat;
				background-size: 24px 24px;
			}
			
			.login-tab {
				width: 310px;
				height: 55px;
				position: relative;
				margin: 0 50px;
				margin-top: 50px;
			}
			
			.login-tab ul {
				position: absolute;
				top: -1px;
				left: 0;
				width: 100%;
				text-align: center;
			}
			
			.login-tab ul li {
				width: 50%;
				height: 55px;
				float: left;
				line-height: 54px;
				cursor: pointer;
				border-top: 1px solid #efefef;
				position: relative;
			}
			
			.login-tab ul li.akt {
				border-top: 1px solid #ff8800;
				color: #ff8800;
			}
		</style>
	    <link rel="stylesheet" href="__STATIC__/manage/css/sweetalert.min.css" />
	</head>

	<body>

		<div class="login-left">
			<div class="login-left-ban">
				<a href="javascript:;">
					<img src="__STATIC__/manage/images/login-bj.png">
				</a>
			</div>

		</div>
		<div class="login-right">

			<div class="login-right-cen">

				<!--<div class="login-logo"><a href="javascript:;"><img src="/static/images/login-logo01.png"></a></div>-->
				<div class="login-tab">
					<ul class="clearfix">
						<li class="akt">账号登录</li>
						<li>手机登录</li>
					</ul>
				</div>
				<div class="login-from">
					<ul>
						<li><label class="loginListUser"></label><input type="text" class="login-from-int login-name" name="username" placeholder="请输入账号"></li>
						<li><label class="loginListPwd"></label><input type="password" class="login-from-int login-pwd" name="password" placeholder="请输入密码"></li>
						<!--<li><label class="loginListYzm"></label><input type="password" class="login-from-int login-pwd" placeholder="请输入验证码"></li>-->
					</ul>
					<p><input type="button" class="login-but" value="登录"></p>
				</div>
				<div class="login-from" style="display: none;">
					<ul>
						<li><label class="loginListUser"></label><input type="text" class="login-from-int login-poloe" name="username" placeholder="请输入手机号码"></li>
						<li><label class="loginListYzm"></label><input type="text" class="login-from-int login-short" placeholder="请输入手机验证码"><input type="button" class="login-short-but" value="获取验证码"></li>
					</ul>
					<p><input type="button" class="login-but01" value="登录"></p>
				</div>
			</div>

		</div>
		<script type="text/javascript" src="__STATIC__/manage/js/jquery.min.js"></script>
		<script type="text/javascript" src="__STATIC__/manage/js/sweetalert.min.js"></script>
		<script>
			function TimedClick($this) {
				var Tim = 60;
				$this.attr("disabled", true).val('重新发送(' + Tim + ')');
				var time = window.setInterval(function() {
					Tim--
					$this.val('重新发送(' + Tim + ')');
					if(Tim <= 0) {
						window.clearInterval(time);
						$this.removeAttr("disabled").val('重新发送');
					}
				}, 1000)
			}

			$(".hqdxm").click(function() {
				var phone = $.trim($(".login-poloe").val());
				$.ajax({
					url: "{:url('getSMSCode')}",
					type: 'post',
					data: {
						phone: phone
					},
					success: function(data) {
						var code = data.code;
						var msg = data.msg;
						if(code == 1) {
							TimedClick($(this))
							swal(
								'获取验证码成功',
								msg,
								'success'
							)
							return;
						} else {
							sweetAlert(
								'获取验证码失败',
								msg,
								'error'
							)
							return;
						}
					}
				})

			})

			$(".login-tab ul li").click(function() {
				$(this).addClass("akt").siblings().removeClass("akt");
				$(".login-from").hide().eq($(this).index()).show();
			})

			$(".login-but").click(function() {
				var user = $.trim($(".login-name").val());
				var pass = $.trim($(".login-pwd").val());
				
				
				if(user==""){
					sweetAlert(
						        "请输入用户名",
								"操作失败",
								'error'
							)
							return;
				}
				if(pass==""){
					sweetAlert(
						        "请输入密码",
								"操作失败",
								'error'
							)
							return;
				}
				
				
				$.ajax({
					url: "{:url('index/login')}",
					type: 'post',
					data: {
						type: "",
						username: user,
						password: pass
					},
					success: function(data) {

						var msg = data.msg;
						if(!data.code) {
							sweetAlert(
								'登陆失败',
								msg,
								'error'
							)
							return;

						}
						window.location.href = data.url;
					}
				})
			});

			$(".login-but01").click(function() {
				var poloe = $.trim($(".login-poloe").val());
				var ashort = $.trim($(".login-short").val());
				$.ajax({
					url: "{:url('index/login')}}",
					type: 'post',
					data: {
						type: "phone",
						phone: poloe,
						sms_captcha: ashort
					},
					success: function(data) {

						var msg = data.msg;
						if(!data.code) {
							sweetAlert(
								'登陆失败',
								msg,
								'error'
							)
							return;
						}
						window.location.href = data.url;
					}
				})
			});
		</script>
	</body>

</html>